<template>
<!-- vue的模版中只能有一个根节点，所以在<template>中如果插入第二个元素就会报错 -->
  <!-- 将<template>中的元素用一个大的<div>包起来，这样就可以在其中添加多个元素了 -->
<div>
    <div class="input-demo"> 
   <bk-input
        placeholder="请输入"
        :left-icon="'bk-icon icon-search'"
        :clearable="true"
        v-model="value"
        :show-clear-only-hover="true"
        @clear="handleSearch"
        @enter="handleSearch"
      >
      </bk-input>
      </div>
      <div class="bk-date-picker">
        <bk-date-picker class="mr15" v-model="initDateTime"
        cellClass="null" :placeholder="'选择日期'" :ext-popover-cls="'custom-popover-cls'"></bk-date-picker>
    </div>
    <div class="button" >
      <bk-button
        size="normal"
        :theme="'primary'"
        :icon="'star'"
        class="mr20"
        @click="handleSearch"
      > 搜索</bk-button>
    </div>

    <div class="layout" style="width: 100%">
      <bk-table :data="tableData" ref="table">
        <bk-table-column label="系统名称" prop="name"></bk-table-column>
        <bk-table-column label="IP地址" prop="ip"></bk-table-column>
        <bk-table-column label="信息来源" prop="source"></bk-table-column>
        <bk-table-column label="系统状态" prop="status"></bk-table-column>
        <bk-table-column label="创建时间" prop="create_time"></bk-table-column>
      </bk-table>
      <bk-pagination
        class="mt20"
        :current.sync="defaultPaging.current"
        :count.sync="defaultPaging.count"
        :limit="defaultPaging.limit"
        @limit-change="handleLimitChange"
        @change="handlePageChange"
      >
      </bk-pagination>
    </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      value: "",
      defaultPaging: {
        current: 1,
        limit: 10,
        count: 0,
      },
    };
  },
  computed: {},
  methods: {
    handleSearch() {
      this.defaultPaging.current = 1;
      this.getMagicTableData();
    },

    handleLimitChange(limit) {
      this.defaultPaging.current = 1;
      this.defaultPaging.limit = limit;
      this.getMagicTableData();
    },
    handlePageChange(page) {
      this.getMagicTableData();
    },
    getMagicTableData() {
      this.$store
        .dispatch("example/getMagicTableData", {
          page: this.defaultPaging.current,
          page_size: this.defaultPaging.limit,
          value: this.value,
        })
        .then((res) => {
          console.log(res, "---");
          this.tableData = res.data.list;
          this.defaultPaging.count = res.data.total;
        });
    },
  },
  created() {
    this.getMagicTableData();
  },
};
</script>

<style lang="postcss">
    .input-demo {
        width: 200px;
        display: inline-block;
    }
    .button{
     display: inline-block;
    }
    .layout{
      margin-top: 10px;
      .bk-date-picker{
        width: 200px;
        display: inline-block;
      }
    }
</style>
